<template>
   <view id="app" class="margin-top flex flex-direction  align-center justify-center">
      <button class="cu-btn bg-green" @click="loadDatas">load datas</button>
      <view class="margin-top text-xl">datas count: {{datas.length}}</view>
   </view>
</template>
<script setup lang="ts">
import {ref, reactive} from "vue"

const datas = ref<object[]>([])

function loadDatas(){
    // 原本
//    datas.value = geDatas()
   // 优化, 冻结一个对象之后，该对象就不能修改了
   datas.value = Object.freeze(geDatas())

   console.log(Object.isFrozen(datas.value))
}

function geDatas(){
    const result = []
    for(let i = 0; i < 10000000; i++){
         result.push({
            id: i,
            name: `name${i}`,
            address: {
                city: `city${i}`,
                province: `province${i}`
            }
         })
    }
    return result
}

</script>